<template>
  <view class="logo-grid-container">
    <view class="logo-grid">
      <view 
        v-for="(item, index) in logoList" 
        :key="index"
        class="logo-item"
        @click="navigateToMiniProgram(item)"
      >
        <view class="logo-wrapper">
          <image :src="item.logo" class="logo-image" mode="aspectFit"></image>
        </view>
        <text class="logo-name">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getTenantApplications } from '@/api/ai'
import { onLoad } from '@dcloudio/uni-app'

// 示例logo数据
const logoList = ref<any>([]);

onLoad(async () => {
  const res = await getTenantApplications({})
  let list: any[] = []
  res.data.data.forEach((item: any) => {
    list.push({
      logo: item.avatar,
      name: item.name,
      appId: item.config.value,
      path: item.path || 'pages/index/index',
      envVersion: item.envVersion || 'release'
    })
  })
  logoList.value = list
})

// 跳转到指定小程序
const navigateToMiniProgram = (item: any) => {
  uni.navigateToMiniProgram({
    appId: item.appId,
    path: item.path,
    extraData: item.extraData,
    envVersion: item.envVersion || 'release',
    success: () => {
      console.log('跳转小程序成功');
    },
    fail: (err) => {
      console.error('跳转小程序失败', err);
      uni.showToast({
        title: '跳转失败',
        icon: 'none'
      });
    }
  });
};
</script>

<style scoped>
.logo-grid-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.logo-item:active {
  transform: translateY(2rpx);
  box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
}

.logo-wrapper {
  width: 120rpx;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  background-color: #fafafa;
  border-radius: 8rpx;
}

.logo-image {
  width: 80rpx;
  height: 80rpx;
}

.logo-name {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  text-align: center;
  line-height: 40rpx;
}
</style>
